<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="../../css/reset.css">
    <title>批量续单</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .container {
            min-height: 100%;
            background: #F7F7F7;
        }

        .sec1 {
            width: 100%;
            height: auto;
            background: #fff;
            padding: 0 0.3rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            padding-top: 0.2rem;
        }

        .sec1 .selType {
            flex: 1;
            font-size: 0.28rem;
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
        }

        .sec1>.title {
            color: #181818;
            font-size: 0.3rem;
            margin-right: 0.19rem;
        }

        .sec1 .check {
            height: 0.38rem;
            width: 0.38rem;
            border: 0.015rem solid#ccc;
            display: inline-block;
            border-radius: 50%;
            margin-right: 0.1rem
        }

        .selType label {
            display: block;
            width: 1.2rem;
            float: left;
            overflow: hidden;
            position: relative;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 0.1rem;
        }

        .selType label>span {
            float: left;
            line-height: .38rem;
            vertical-align: middle;
            font-size: 0.24rem;
        }

        .selType label:not(:last-of-type) {
            margin-right: 0.1rem
        }

        .selType input {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0;
            left: 0;
            top: 0;
            margin: 0;
        }

        .selType input:checked+label>.check {
            background: url("../../image/iconweixuanzhongx.png");
            background-size: 100% 100%;
        }

        .selType input:checked+.check {
            background: url("../../image/iconxuanzhongx.png");
            background-size: 100% 100%;
        }

        .sec2 {
            background: #F7F7F7;
            font-size: 0.24rem;
            color: #898989;
            padding-bottom: 0.2rem;
            padding-left: 0.3rem
        }

        .sec2>p {
            padding-top: 0.2rem;
        }

        .sec2 span {
            color: #f2ba6e
        }

        /*.list{padding-bottom: 1.25rem;}*/
        .list .check {
            height: 0.35rem;
            width: 0.35rem;
            display: block;
            float: left;
            border: 0.015rem solid#DCDCDC;
            border-radius: 50%;
        }

        .list li {
            margin-top: 0.18rem;
        }

        .list li:first-child {
            margin-top: 0rem;
        }

        .list li p {
            overflow: hidden;
            padding-top: 0.23rem;
            display: inline-block;
            width: 100%;
        }

        .list li p>span {
            float: left
        }

        .list li label {
            font-size: 0;
            padding: 0 0.3rem;
            background: #fff;
        }

        .list .name {
            color: #262626;
            font-size: 0.28rem;
            padding-left: 0.16rem;
            line-height: 0.35rem;
        }

        .list .status {
            color: #42AA79;
            font-size: 0.24rem;
            float: right;
            line-height: 0.35rem;
        }

        .list .detail {
            color: #999999;
            font-size: 0.22rem;
            padding-top: 0.1rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
        }

        .list label>.detail:nth-child(2) {
            padding-top: 0.3rem
        }

        .list li>label {
            padding-bottom: 0.3rem;
            display: block
        }

        .list li input[type=checkbox]:checked+label>.p1>.check {
            background: url("../../image/iconxuanz.png");
            background-size: 100% 100%;
            border: 0;
        }

        /* 
        .list .detail>span:nth-child(1) {
            float: left;
            width: 66%;
        }

        .list .detail>span:nth-child(2) {
            float: right;
            width: 34%;
            text-align: left;
            overflow: hidden;
        } */

        .list .ifLock {
            color: #262626;
            display: none;
        }

        .list li input[type=checkbox]:checked+label .ifLock {
            display: block;
        }

        .list li .p1 {
            padding-top: 0.3rem
        }

        .list li {
            position: relative
        }

        .list li input {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 1;
            opacity: 0;
            border: 0;
            margin: 0;
        }

        .list .detail .span2 {
            color: #595959;
        }

        .list .detail .continue_power {
            color: #42AA79;
        }

        .list .detail .isred {
            color: #F03838;
        }

        .sub {
            position: fixed;
            z-index: 1;
            bottom: 0;
            width: 100%;
            height: 1rem;
            box-shadow: 0 0 0.1rem 0 rgba(0, 0, 0, 0.2);
            background: #fff;
        }

        .sub #submit {
            display: block;
            width: 2.8rem;
            background: #FFD203;
            text-align: center;
            font-size: 0.32rem;
            color: #262626;
            line-height: 1rem;
            height: 1rem;
            float: right
        }

        .sub .selAll {
            width: 0.35rem;
            height: 0.35rem;
            display: inline-block;
            border-radius: 50%;
            border: 0.015rem solid#DCDCDC
        }

        .sub .isCheckAll {
            background: url("../../image/iconxuanz.png");
            background-size: 100% 100%;
            border: 0;
        }

        .sub .selText {
            font-size: 0.24rem;
            color: #262626;
        }

        .sub .left {
            float: left;
            padding-left: 0.29rem;
        }

        .sub .left span {
            float: left;
            line-height: 1rem;
        }

        .hasSel {
            color: #999999;
            font-size: 0.24rem;
            padding-left: 0.15rem;
        }

        .left .hasSel .selNum {
            color: #F03838;
            float: none
        }

        .fastChoose {
            width: 100%;
            height: auto;
            font-size: 0.28rem;
            background-color: #fff;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;
            padding: 0.2rem 0.28rem;
            padding-top: 0;
        }

        .fastChoose ul {
            flex: 1;
            height: auto;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: flex-start;
            margin-left: 0.19rem;
        }

        .showChoose li {
            width: 1.4rem;
            height: 0.54rem;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(238, 238, 238, 1);
            border-radius: 0.1rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
        }

        .showChoose li:not(:first-of-type) {
            margin-left: 0.19rem;
        }

        .showChoose .chooseLi {
            background: rgba(255, 210, 3, 1);
        }

        #list li .colorText {
            display: block;
            width: auto;
            height: 0.34rem;
            background: rgba(255, 151, 3, 0.1);
            font-size: 0.22rem;
            margin: 0 0.08rem;
            line-height: 0.34rem;
            text-align: center;
            color: rgba(221, 146, 23, 1);
            padding: 0 0.1rem;
            box-sizing: border-box;
            border-radius: 0.06rem;
        }
    </style>
</head>

<body>
    <div class="container">
        <section class="sec1">
            <p class="title" style="color:#898989;">续单期限</p>
            <div class="selType">
                <!-- <label for="type180" style="padding-left: 0">
                    <input type="radio" id="type180" value="180" name="type" checked>
                    <span class="check"></span>
                    <span>180天</span>
                </label>
                <label for="type90">
                    <input type="radio" id="type90" value="90" name="type">
                    <span class="check"></span>
                    <span>90天</span>
                </label>
                <label for="type30">
                    <input type="radio" id="type30" value="30" name="type">
                    <span class="check"></span>
                    <span>30天</span>
                </label> -->
            </div>
        </section>
        <section class="fastChoose limitClass" style="padding-bottom:0.3rem;padding-top: 0.3rem;display: none;">
            <p style="color:#898989;">续单库存:</p>
            <p class="limitDataNum" style="margin-left: 0.18rem;">
                --T
            </p>
        </section>
        <section class="fastChoose">
            <p class="title" style="font-size: 0.3rem;color:#898989;">快速筛选</p>
            <ul class="showChoose">
                <!-- <li class="chooseLi" data-value="0">
                    全部
                </li> -->
                <li class="chooseLi" data-value="2">
                    已到期
                </li>
                <li data-value="1">
                    即将到期
                </li>
            </ul>
        </section>
        <section class="sec2">
            <p>1.预约续单浮动算力以续单生效时平台公示为准</p>
            <p>2.单次续单上限为<span>100</span>单 </p>
            <p>3.低于标准价合约不支持批量续单，请在合约详情中补差价续单</p>
        </section>
        <section class="list">
            <ul id="list">
                <!-- <li>
                    <label for="list2">
                        <input type="checkbox" name="order" id="list2" value="2">
                        <p class="p1">
                            <span class="check"></span>
                            <span class="name">BTC 单币算力包</span>
                            <span class="status">挖矿中</span>
                        </p>
                        <p class="detail">
                            <span class="span1">续单前总算力</span><span class="span2">2T</span>
                        </p>
                        <p class="detail">
                            <span class="span1">续单后总算力</span><span class="span2">2T</span>
                        </p>
                        <p class="detail">
                            <span class="span1">锁定到期</span><span class="span2">2025-3-16 00:00:00</span>
                        </p>
                        <p class="detail">
                            <span class="span1">续单后锁定到期</span><span class="span2">2025-3-16 00:00:00</span>
                        </p>
                    </label>
                </li> -->
            </ul>
        </section>
        <div class="loading"
            style="font-size: 0.24rem;color: #c9c4c4;line-height: 1rem;text-align: center;margin-bottom: 1rem;">加载中...
        </div>
        <div class="sub">
            <span class="left">
                <span class="selAll" style="margin-top: 0.32rem"></span>
                <span class="selText" style="padding-left: 0.11rem">全选</span>
                <span class="hasSel">已选择<span class="selNum">0</span>/<span class="total_order"
                        style="float: none;"></span>个合约</span>
            </span>
            <span id="submit">确认</span>
        </div>
    </div>
</body>

</html>
<script src="../../script/autosize.js"></script>
<script src="../../script/fastclick.js"></script>
<script src="../../script/jquery_three_two_one.js"></script>
<script src="../../script/dotmin.js"></script>
<script src="../../script/app.js"></script>
<script type="text/html">
    {{~it:item:index}}
    <li>
        <input type="checkbox" name="order" value="p{{=index}}" id="order{{=index}}" order-id="{{=item.order_id}}"
               total_power="{{=item.computing_power}}" data-afterPower="{{=item.after_computing_power}}">
        <label for="order{{=index}}">
            <p class="p1">
                <span class="check"></span>
                <span class="name">{{=item.product_name}}</span>
                <span class="status">{{=item.workText}}</span>
            </p>
            {{?item.auto_renewal_time>60}}
            <p class="detail" style="padding-top:0.1rem;">
                <span style="color:rgba(221,146,23,1);display: flex;display: -webkit-flex;align-items: center;justify-content: flex-start;display:{{=item.showArriTime == true?'flex':'none'}}">
                    <span class="colorText" style="margin-left:0;">{{=item.daysNum}}</span>天<span class="colorText">{{=item.housNum}}</span>时<span class="colorText">{{=item.minNum}}</span>分,将自动续单
                 </span>
                <span>
                    <span class="span1"></span>
                    <span class="span2"></span>
                </span>
            </p>
            {{?}}
            <p class="detail">
            <span>
                <span class="span1">总金额：</span><span class="span2">
                    {{?item.pay_currency=="BHPC"||item.pay_currency=="CNY"}}{{=item.total_deposit}}CNY{{?}}
                    {{?item.pay_currency=="BCNY"}} {{=item.total_deposit}}OTC余额{{?}}
                    {{?item.pay_currency=="USDT"}}{{=item.total_deposit}}USDT{{?}}
                </span>
            </span>
            <span>
                <span class="span1">基础算力：</span><span class="span2"> {{=item.base_power}}T</span>
            </span>
            </p>
            <p class="detail">
                {{?item.regular_date_num>30}}
                <span>
                    <span class="span1">锁定到期</span>
                    <span class="span2">{{=item.end_time}}</span>
                </span>
                {{??}}
                <span>
                    <span class="span1"></span>
                    <span class="span2"></span>
                </span>
                {{?}}
                <span>
                    <span class="span1">总算力：</span>
                    <span class="span2">{{=item.computing_power}}T</span>
                </span>
            </p>
            <p class="detail ifLock">
                <span>
                     <span class="span1">续单后锁定到期：</span>
                     <span class="span2 afterContinue">{{=item.days}}</span>
                 </span>
                <span>
                    <span class="span1">续单后总算力：</span>
                    <span class="span2 continue_power">{{=item.after_computing_power}}T</span>
                </span>
            </p>
        </label>
    </li>
    {{~}}
</script>
<script type="text/html" id="chooseDays">
    {{~it:it:index}}
    <label for="type{{=it.days}}">
        <input type="radio" id="type{{=it.days}}" value="{{=it.days}}" name="type"  data-limitNum={{=it.reletNum}} {{?index==0}} checked {{?}}>
        <span class="check"></span>
        <span>{{=it.days}}天</span>
    </label>
    {{~}}
</script>
<script type="text/html" id="model">
    {{~it:item:index}}
    <li>
        <input type="checkbox" name="order" id="list2" value="2" value="p{{=index}}" id="order{{=index}}" order-id="{{=item.order_id}}"
        total_power="{{=item.computing_power}}" data-afterPower="{{=item.after_computing_power}}" data-totalBase={{=item.base_power}}>
        <label for="list2">
            <p class="p1">
                <span class="check"></span>
                <span class="name">{{=item.product_name}}</span>
                <span class="status">{{=item.workText}}</span>
            </p>
            <p class="detail">
                <span class="span1">续单前总算力</span><span class="span2">{{=item.computing_power}}T {{?item.is_bhp_pos==1}} + {{=item.bhp_power}}T BHP{{?}} </span>
            </p>
            <p class="detail">
                <span class="span1">续单后总算力</span><span class="span2" style="color:#42AA79;">{{=item.after_computing_power}}T {{?item.is_bhp_pos==1}} + {{=item.bhp_power}}T BHP{{?}}</span>
            </p>
            <p class="detail">
                <span class="span1">锁定到期</span><span class="span2">{{=item.end_time}}</span>
            </p>
            <p class="detail">
                <span class="span1">续单后锁定到期</span><span class="span2">{{=item.days}}</span>
            </p>
        </label>
    </li>
    {{~}}
</script>
<script>
    apiready = function () {
        var app = new APP();
        app.headerMap();
        var account = app.getAccount();
        var sel_arr = [];//选择的订单(id数组)
        var continueType = 0;//180续
        var limitNumData = 0;//选择续单时间对应的库存
        var chooseValue = 2;//默认选中 已到期
        var totalBasePower = 0;//选择订单的基础算力总T数
        var submitIdArr = [];
        var joinTeame = 0;//加入排队 默认为0 
        function clearEmpty() {
            $("#list").empty();
            submitIdArr.length = 0;
            sel_arr.length = 0;
            $(".selNum").text(0);
            $(".selAll").removeClass("isCheckAll");
        }
        //加载数据
        function loadPage() {
            app.ajaxPro({
                url: "order/get-batch-renewal",
                values: {
                    token: account.token,
                    regular_date_num: continueType,
                    time_type: chooseValue,
                    pick_orders: submitIdArr.join(',')
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    if (!ret.data) return
                    $(".loading").text('到底了...');
                    var getlist = ret.data.list;
                    for (var i = 0; i < getlist.length; i++) {
                        var item = getlist[i];
                        var total_deposit = item.total_deposit || "0.00";
                        if (item.pay_currency == "USDT" || item.pay_currency == "BHPC") {
                            item.total_deposit = app.sliceNum(total_deposit, 4);
                        } else {
                            item.total_deposit = app.sliceNum(total_deposit, 2);
                        }
                        if (item.auto_renewal_time && item.auto_renewal_time > 0) {
                            item.showArriTime = true;
                            var dayTime = app.getDurationNew(item.auto_renewal_time).split(":");
                            item.daysNum = dayTime[0];
                            item.housNum = dayTime[1];
                            item.minNum = dayTime[2];
                        } else {
                            item.showArriTime = false;
                        }
                    }
                    $(".total_order").text(getlist.length);
                    var temp = doT.template($("#model").text());
                    $("#list").html(temp(getlist));
                    $("input[name='order']").unbind('change').on("change", function () {
                        var curinput = $(this);
                        var ischeck = curinput.is(":checked");
                        var thisorder = curinput.attr('order-id');
                        var curindex = sel_arr.indexOf(thisorder);
                        if (ischeck) {
                            if (curindex == -1) {
                                sel_arr.push(thisorder);
                            }
                        } else {
                            if (curindex != -1) {
                                sel_arr.splice(curindex, 1)
                            }
                        }
                        setSty(curinput.parent());
                        if (sel_arr.length == getlist.length) {
                            $(".selAll").addClass("isCheckAll");
                        } else {
                            $(".selAll").removeClass("isCheckAll");
                        }
                        $(".selNum").text(sel_arr.length);
                    })
                    bindChange();
                } else {
                    app.toast(ret.message)
                }
            })
        }

        //切换90/180 ，或者选中后 的列表样式
        function setSty(curLi) {
            var curInput = curLi.find('input');
            var afterPower = Number(curInput.attr('data-afterPower'));//续单后总算力
            var total_power = Number(curInput.attr('total_power'));//续单前总算力
            var isMax = afterPower >= total_power ? true : false;//判断是否比原来总算力大
            if (isMax) {
                curLi.find('.continue_power').removeClass('isred');
            } else {
                curLi.find('.continue_power').addClass('isred');
            }
        }
        $(".selType").on('change', "input[name=type]", function () {
            continueType = $("input[name=type]:checked").val();
            limitNumData = $("input[name=type]:checked").attr("data-limitNum");
            if (Number(limitNumData) >= 0) {
                $(".limitClass").show();
                $(".limitDataNum").text(limitNumData + "T");
            } else {
                $(".limitClass").hide();
            }
            clearEmpty();
            loadPage();
        });
        function getconfigRegular() {
            app.ajaxPro({
                url: "order/regular-config",
                values: {
                    token: account.token
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    var temp = doT.template($("#chooseDays").text());
                    continueType = ret.data[0].days;
                    limitNumData = ret.data[0].reletNum;
                    if (Number(ret.data[0].reletNum) >= 0) {
                        $(".limitClass").show();
                        $(".limitDataNum").text(ret.data[0].reletNum + "T");
                    }
                    $(".selType").html(temp(ret.data));
                    loadPage();
                }
            })
        }
        getconfigRegular();
        //全选  ，//选择180/90
        function bindChange() {
            //全选，不全选
            $(".sub .left").unbind('click').click(function () {
                var thiz = $(this).find('.selAll');
                var isChecked = thiz.hasClass('isCheckAll');//是否已经全选
                $("ul li").each(function () {
                    var thisLi = $(this);
                    var Input = thisLi.find('input[name=order]');
                    if (isChecked) {
                        Input.prop('checked', false).change();
                    } else {
                        Input.prop('checked', true).change();
                    }
                    setSty(thisLi);
                });
                if (isChecked) {
                    thiz.removeClass("isCheckAll");
                } else {
                    thiz.addClass("isCheckAll");
                }
            });
        }

        function sub(submitIdArr) {
            app.ajaxPro({
                url: "order/batch-renewal",
                values: {
                    token: account.token,
                    orderIds: submitIdArr.join(','),
                    type: continueType,
                    join_queue: joinTeame
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    if (ret.message == "success") {
                        app.toast("续单成功")
                    } else {
                        app.toast(ret.message);
                    }
                    joinTeame = 0;
                    setTimeout(function () {
                        app.trigger('transferSe');
                        app.closeW()
                    }, 2000);
                } else {
                    app.toast(ret.message);
                }
            })
        };

        function afterRenew(submitIdArr) {
            app.ajaxPro({
                url: "order/batch-book-renewal",
                values: {
                    token: account.token,
                    orderIds: submitIdArr.join(','),
                    type: continueType
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    if (ret.message == "success") {
                        app.toast("续单成功")
                    } else {
                        app.toast(ret.message);
                    }
                    setTimeout(function (params) {
                        app.trigger('transferSe');
                        app.closeW()
                    }, 2000);
                } else {
                    app.toast(ret.message);
                }
            })
        };
        $(".showChoose li").click(function () {
            $(this).addClass("chooseLi").siblings().removeClass("chooseLi");
            chooseValue = $(this).attr("data-value");
            clearEmpty();
            loadPage();
        });
        function uniq(array) {
            var temp = []; //一个新的临时数组
            for (var i = 0; i < array.length; i++) {
                if (temp.indexOf(array[i]) == -1) {
                    temp.push(array[i]);
                }
            }
            return temp;
        }
        $("#submit").click(function () {
            totalBasePower = 0;
            submitIdArr = [];
            $("#list li").each(function () {
                var curinput = $(this).find('input');
                if (curinput.is(':checked')) {
                    totalBasePower = app.accAdd(totalBasePower, curinput.attr('data-totalBase'))
                    submitIdArr.push(curinput.attr('order-id'));
                }
            });
            submitIdArr = uniq(submitIdArr);
            if (submitIdArr.length <= 0) {
                app.toast('请选择订单');
                return;
            }
            if (submitIdArr.length > 100) {
                app.toast('单次续单上限为100单');
                return;
            }
            if (Number(totalBasePower) > Number(limitNumData) && Number(limitNumData) >= 0 && chooseValue == 1) {
                var param = {
                    dtype: "dialog95",
                    data: {
                        totalBase: totalBasePower,
                        chooseDays: continueType,
                        limitData: limitNumData
                    }
                };
                app.dialog(param);
                return
            }
            if (Number(totalBasePower) > Number(limitNumData) && chooseValue == 2) {
                var param = {
                    dtype: "dialog102",
                    data: {
                        totalBase: totalBasePower,
                        chooseDays: continueType,
                        limitData: limitNumData
                    }
                };
                app.dialog(param);
                return
            }
            app.trigger("joinTeame");
        })
        function getMachineData() {
            app.ajaxPro({
                url: "order/get-batch-renewal",
                values: {
                    token: account.token,
                    regular_date_num: continueType,
                    time_type: chooseValue,
                    pick_orders: submitIdArr.join(',')
                },
                openFlower: true
            }, function (ret) {
                if (ret.code == 200) {
                    var param = {
                        dtype: "dialog71",
                        data: {
                            renewBefore: ret.data.before_total_power,
                            renewAfter: ret.data.afer_total_power < 0 ? 0 : ret.data.afer_total_power,
                            renewbhpPower: ret.data.after_bhp_power,
                            renewNum: submitIdArr.length,
                            renewNochangeNum: ret.data.larger_num,
                            isEnough: Number(totalBasePower) > Number(limitNumData) ? true : false
                        }
                    };
                    app.dialog(param);
                } else {
                    app.toast(ret.message);
                }
            })
        }
        app.listen('confirm', function () {
            if (chooseValue == 1) {
                afterRenew(submitIdArr);
                return
            }
            sub(submitIdArr);
        });
        app.listen("joinTeame", function () {
            getMachineData();
        })
        //加入排队
        app.listen("joinTeamenew", function () {
            joinTeame = 1;
            getMachineData();
        })
    }
</script>